<template>
  <el-container>
    <!-- <el-header>
    header
  </el-header> -->
    <el-main>
      <el-row>
        <el-col :span="16" style="margin-left: 15%; width: 1015px">
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1"
              >全部商品<font color="red">{{this.numaass}}</font></el-menu-item
            >
            <el-button type="primary" style="float: right" @click="ssascxz">结算</el-button>
            <font
              size="3px"
              style="float: right; margin-right: 2px; margin-top: 10px"
            >
              已选商品(不含运费):<font color="red">${{ this.numss }}</font>
            </font>
          </el-menu>
        </el-col>
      </el-row>
      <el-row style="margin-left: 15%">
        <el-col :span="3">
          <el-checkbox v-model="checked">全选</el-checkbox>
        </el-col>
        <el-col :span="5"> 商品信息 </el-col>
        <el-col :span="2"> 单价(元) </el-col>
        <el-col :span="2"> 数量 </el-col>
        <el-col :span="2"> 金额(元) </el-col>
        <el-col :span="3"> 操作 </el-col>
      </el-row>

      <el-row style="margin-left: 15%; margin-top: 15px">
        <!-- <el-col :span="5">
          <el-checkbox v-model="checked"></el-checkbox
          ><i class="el-icon-s-goods" style="margin-left: 10px"
            >:包子馒头山东馒头</i
          >
        </el-col> -->
      </el-row>
      <el-row
        style="margin-left: 15%; margin-top: 15px"
        v-for="item in this.from"
        :key="item.id"
      >
        <el-col
          :span="3"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
          "
        >
          <el-col :span="1"
            ><el-checkbox
              v-model="checked"
              style="margin-left: 10px; margin-top: 12px; width: 1px"
            ></el-checkbox
          ></el-col>
          <img
            :src="'http://localhost:5000/files/' + item.imageId"
            style="width: 100px; margin-left: 25px; margin-top: 15px"
          />
        </el-col>
        <el-col
          :span="5"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
          "
        >
          {{ item.spuname }}
        </el-col>
        <!-- <el-col
          :span="3"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 20px;
          "
        >
          <el-col><i style="float: right"></i></el-col>
          <dir v-for="itemss in spuspecification" :key="itemss.id">
            <div v-for="itemaa in spuspecificationvalue" :key="itemaa.id">
              <el-col style="width: 80px"
                v-if="itemss.id == itemaa.spuspecificationId">{{ itemss.spuspecificationname }}:{{itemaa.spuspecificationvaluename}}</el-col
              >
            </div>
          </dir>
        </el-col> -->
        <el-col
          :span="2"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          促销价格:<font color="red">{{ item.price }}</font>
        </el-col>
        <el-col
          :span="2"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          <font color="red">{{ item.spuTotal }}</font>
        </el-col>
        <el-col
          :span="2"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          <font color="red">{{ item.price * item.spuTotal }}</font>
        </el-col>
        <el-col
          :span="2"
          style="
            height: 150px;
            width:205px
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          <div class="CheckOutBtn">
            <el-button type="primary">删除</el-button>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Cookies from "js-cookie";
import { getShopingCar } from "../api/shoppingcart";
export default {
  name: "test1",
  data() {
    return {
      num: 1,
      checked: true,
      from: {
        
      },
      id:0,
      numss: 0,
            numaass: 0,
      fs: [],
      spuspecification: {},
      spuspecificationvalue: {},
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    ssascxz(){
      this.from=[]
      this.$router.push("/checkOut1?moeny="+this.numss)
    }
  },
  async mounted() {
    console.log(this.uId);
    this.id = parseInt(this.uId)
    await getShopingCar(this.id).then((res) => {
      console.log(res);
      this.from = res.data.data;
      this.spuspecification = res.data.spuspecification;
      this.spuspecificationvalue = res.data.spuspecificationvalue;
            // this.numaass = res.
      this.numaass = res.data.data.length
    });
    this.fs = this.from;
    await this.from.forEach((res) => {
      console.log(res);
      this.numss = this.numss+res.spuTotal*res.price
    });
    console.log(this.numss);
  },
  computed: {
    uId() {
      return Cookies.get("id");
    },
  },
};
</script>

<style scoped>
.CheckOutBtn {
  margin-left: 5px;
}
</style>